<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:p="http://primefaces.prime.com.tr/ui">
    <h:head>
        <title>Reservas</title>
        <link href="estilo.css" type="text/css" rel="stylesheet"/>
    </h:head>
    <h:body styleClass="texto">
        <p:growl id="popup" life="3000" showDetail="true"/>
        <br></br>
        <p:growl id="msju" showDetail="true" life="3000"/>
        <div style="overflow-y: scroll; height: 450px">
            <center>
                <h:panelGrid columns="2" cellpadding="6">
                    <p:panel styleClass="texto">
                        <h1>Factura</h1>
                        <h:form>
                            <h:panelGrid columns="2">
                                <h:outputLabel value="Código:"/> 
                                <h:outputLabel style="font-size: large" value="fact018"/> 
                                <h:outputLabel value="Fecha facturación:"/>
                                <h:outputLabel style="font-size: medium" value="2011-11-11">
                                    <f:convertDateTime type="date" pattern="yyyy-MM-dd"/>
                                </h:outputLabel> 
                            </h:panelGrid>
                        </h:form>
                    </p:panel>
                    <p:panel styleClass="texto">
                        <h:form id="furm">
                            <h1>Reserva</h1>
                            <h:outputLabel value="Codigo:"/>&nbsp;
                            <p:inputText id="codReserva" value="#{factura.reserva.codigoReserva}" style="width: 45%"/>
                            <p:commandButton actionListener="#{factura.consultarReserva()}" ajax="update" update="popup" image="ui-icon ui-icon-search"/>
                            <h:panelGrid columns="2">
                                <h:outputLabel value="Fecha Realización:"/>
                                <h:outputLabel value="#{factura.reserva.fechaRealizacion}">
                                    <f:convertDateTime type="date" pattern="yyyy-MM-dd"/>
                                </h:outputLabel>
                            </h:panelGrid>
                        </h:form>
                    </p:panel>
                </h:panelGrid>   
                <p:panel style="width: 61%">
                    <h1 style="text-align: left">Cliente</h1>
                    <h:form>
                        <h:panelGrid columns="4" cellspacing="7">
                            <h:outputLabel value="Cedula:"/>
                            <h:outputLabel id="cedSolicitante" value="#{factura.reserva.cliente.cedula}"/>
                            <h:outputLabel value="Procedencia:"/>
                            <h:outputLabel value="#{factura.reserva.cliente.procedencia}"/>
                            <h:outputLabel value="Nombre:"/>
                            <h:outputLabel value="#{factura.reserva.cliente.nombre}"/>
                            <h:outputLabel value="Telefono:"/>
                            <h:outputLabel value="#{factura.reserva.cliente.telefono}"/>
                        </h:panelGrid>
                    </h:form>
                </p:panel>
                <br></br>
                <p:panel style="width: 61%">
                    <h1 style="text-align: left">Detalles</h1>
                    <h:panelGrid columns="2" styleClass="texto">
                        <h:form>
                            <p:dataTable binding="#{facturaSala.tablaCheckIns}" value="#{facturaSala.listarCheckInSala()}" var="checkSal" emptyMessage="" paginator="true" rows="3">
                                <f:facet name="header">
                                    Reserva de Salas
                                </f:facet>
                                <p:column >
                                    <f:facet name="header">
                                        Fecha
                                    </f:facet>
                                    #{checkSal.fechaRegistro}
                                </p:column>
                                <p:column>
                                    <f:facet name="header">
                                        # Sala
                                    </f:facet>
                                    #{checkSal.reservaSala.sala.numero}
                                </p:column>
                                <p:column >
                                    <f:facet name="header">
                                        Hora Inicio
                                    </f:facet>
                                    #{checkSal.reservaSala.horaInicio}
                                </p:column>
                                <p:column>
                                    <p:commandButton actionListener="#{facturaSala.consultarCheckIn()}" ajax="true" update="nosplay" value="$" oncomplete="dlgFactSala.show()"/>
                                </p:column>
                            </p:dataTable>
                        </h:form>
                        <h:form>
                            <p:dataTable id="tablaRH" binding="#{facturaHabitacion.tablaCheckIns}" value="#{facturaHabitacion.listarCheckInHabitacion()}" var="checkHab" emptyMessage="" paginator="true" rows="3">
                                <f:facet name="header">
                                    Reserva de Habitaciones
                                </f:facet>
                                <p:column >
                                    <f:facet name="header">
                                        Ingreso
                                    </f:facet>
                                    #{checkHab.fechaIn}
                                </p:column>
                                <p:column >
                                    <f:facet name="header">
                                        Salida
                                    </f:facet>
                                    #{checkHab.reservaHabitacion.fechaProgOut}
                                </p:column>
                                <p:column >
                                    <f:facet name="header">
                                        # Hab
                                    </f:facet>
                                    #{checkHab.reservaHabitacion.habitacion.numero}
                                </p:column>
                                <p:column>
                                    <p:commandButton actionListener="#{facturaHabitacion.consultarCheckIn()}" ajax="true" update="display" value="$" oncomplete="dlgFactHab.show()"/>
                                </p:column>
                            </p:dataTable>
                        </h:form>
                    </h:panelGrid>
                </p:panel>
            </center>
        </div>
        <h:form id="nosplay">
            <p:dialog width="450" header="Reserva de Salón de Eventos" modal="true" widgetVar="dlgFactSala" resizable="false">
                <p:commandButton title="Cancelar Reserva" image="ui-icon ui-icon-gear" style="float: right" actionListener="#{reservaSala.cancelarReservaSala()}" ajax="update"/>
                <p:panel>
                    <h:panelGrid columns="2">
                        <h:outputLabel value="Fecha registrada del evento:"/>
                        <h:outputLabel style="float: right" id="fechaEvento" value="#{facturaSala.checkInSala.fechaRegistro}"/>
                        <h:outputLabel value="Hora de Inicio prog:"/>
                        <h:outputLabel style="float: right" id="horaInicio" value="#{facturaSala.checkInSala.reservaSala.horaInicio}"/>
                        <h:outputLabel value="Hora de Fin prog:"/>
                        <h:outputLabel style="float: right" value="#{facturaSala.checkInSala.reservaSala.horaFin}"/>
                        <h:outputLabel value="Descripción:"/>
                        <h:inputTextarea id="descripción" value="#{facturaSala.checkInSala.reservaSala.descripcion}" required="true" requiredMessage="Descripción del evento es requerida" style="width: 176px; resize: none; float: right" disabled="#{reservaSala.noPermitirEdicion}"/>
                    </h:panelGrid>
                    <p:separator/>
                    <h:panelGrid columns="2">
                        <h:outputLabel value="Valor de la Sala por horas"/>
                        <p:inputText style="float: right; width: 70%" id="valor" onkeyup="otroEvento()"/>
                        <h:outputLabel value="Duracion del Evento (Horas)"/>
                        <p:inputText style="float: right; width: 40%" id="hora" onkeyup="otroEvento()"/>
                    </h:panelGrid>
                    <p:separator/>
                    <center>
                        <h:panelGrid columns="2">
                        <h:outputLabel value="Total"/>
                        <p:inputText id="totalS"/>
                    </h:panelGrid>
                    </center>
                    <f:facet name="footer">
                        <center>
                            <h:panelGrid columns="3">
                                <p:commandButton id="salvar" value="Guardar" actionListener="#{reservaSala.actualizarReservaSala()}" oncomplete="handleComplete(xhr, status, args)" ajax="false" update="popup"/>
                                <p:commandButton value="Cancelar" onclick="dlgResSala.close()"/>
                            </h:panelGrid>
                        </center>
                    </f:facet>
                </p:panel>
            </p:dialog>
        </h:form>
        <h:form  id="display">
            <p:dialog width="450" header="Facturar Reserva de Habitación" modal="true" widgetVar="dlgFactHab" resizable="false">
                <p:panel>
                    <h:panelGrid columns="2" style="width: 100%">
                        <h:outputLabel value="Fecha registrada de entrada:"/>
                        <h:outputLabel style="float: right" value="#{facturaHabitacion.checkInHabitacion.fechaIn}">
                            <f:convertDateTime type="date" pattern="yyyy-MM-dd"/>
                        </h:outputLabel>
                        <h:outputLabel value="Fecha programada de salida:"/>
                        <h:outputLabel style="float: right" value="#{facturaHabitacion.checkInHabitacion.reservaHabitacion.fechaProgOut}">
                            <f:convertDateTime type="date" pattern="yyyy-MM-dd"/>
                        </h:outputLabel>
                        <h:outputLabel value="Duración de la Reserva (días):"/>
                        <p:inputText id="dia" readonly="true" style="float: right; width: 20%" value="#{facturaHabitacion.duracionDias}"/>
                    </h:panelGrid>
                    <p:separator/>
                    <h:panelGrid columns="2">
                        <h:outputLabel value="Tipo de Habitación:"/>
                        <h:outputLabel style="float: right" value="#{facturaHabitacion.checkInHabitacion.reservaHabitacion.habitacion.distribucion}"/>
                        <h:outputLabel value="Numero de Habitación:"/>
                        <h:outputLabel style="float: right" value="#{facturaHabitacion.checkInHabitacion.reservaHabitacion.habitacion.numero}"/>
                        <h:outputLabel value="Valor de la Habitación por días:"/>
                        <p:inputText id="val" value="#{facturaHabitacion.valor}" onkeyup="evento()"/>
                    </h:panelGrid>
                    <p:separator/>
                    
                    <h:panelGrid columns="2" style="width: 100%">
                            <h:outputLabel value="Total:"/>
                            <p:inputText style="float: right" id="total" value="" readonly="true"/>
                        </h:panelGrid>
                        <h:outputLabel style="font-size: smaller; color: red; float: right" value="IVA No incluido"/>
                    
                    <f:facet name="footer">
                        <center>
                            <h:panelGrid columns="2">
                                <p:commandButton id="save" value="Facturar" actionListener="#{facturaHabitacion.facturar()}" ajax="update"/>
                                <p:commandButton value="Cancelar" onclick="dlgFactHab.close()"/>
                            </h:panelGrid>
                        </center>
                    </f:facet>
                </p:panel>
            </p:dialog>
        </h:form>
        <script type="text/javascript">
                    function handleComplete(xhr, status, args) {
                            if(!args.validationFailed) {
                                    dlgFactHab.hide();   
                                    dlgResSala.hide();    
                            } 
                    }
                  function evento() {	
                      var campoVal=document.getElementById("display:val");
                      var campoDia=document.getElementById("display:dia");
                      var campoTotal=document.getElementById("display:total");
                      campoTotal.value = parseInt(campoVal.value) * parseInt(campoDia.value); 
                  }
                  function otroEvento() {	
                      var campoVal=document.getElementById("nosplay:valor");
                      var campoHo=document.getElementById("nosplay:hora");
                      var campoTotalS=document.getElementById("nosplay:totalS");
                      campoTotalS.value = parseInt(campoVal.value) * parseInt(campoHo.value); 
                  }
        </script>
    </h:body>
</html>